<template>
  <div class="app-container">
    <div class="view-title">权益套餐分类</div>
    <div>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <div>
      <el-table
        :data="tableDataType"
        stripe
        row-key="id"
        :tree-props="{ children: 'children' }"
        default-expand-all
        style="width: 100%"
      >
        <el-table-column prop="id" label="id"> </el-table-column>
        <el-table-column prop="name" label="分类名称"> </el-table-column>
        <el-table-column prop="cover_img" label="封面图">
          <template slot-scope="scope">
            <img :src="scope.row.cover_img" alt="" style="width: 120px" />
          </template>
        </el-table-column>
        <el-table-column prop="parent_id" label="上级id"> </el-table-column>
        <el-table-column prop="weight" label="权重"> </el-table-column>
        <el-table-column prop="status" label="是否展示">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0"
              @change="upEnabled($event, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="handleDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <add-equirty-type
      ref="refAddType"
      :tableDataRecharge="tableDataRecharge"
      @handleChangeTop="handleChangeTop"
      @sureDialogAdd="sureDialogAdd"
      @cancelDialogAdd="cancelDialogAdd"
    />

    <!-- 编辑弹窗 -->
    <edit-equirty-type
      ref="refEditType"
      :editTypeDetails="editTypeDetails"
      :tableDataRecharge="tableDataRecharge"
      @sureDialogEdit="sureDialogEdit"
      @cancelDialogEdit="cancelDialogEdit"
    />
  </div>
</template>
<script>
import {
  getAppQyPackageTypeList,
  getAppQyPackageTypeInfo,
  addAppQyPackageType,
  updateAppQyPackageType,
  deleteAppQyPackageType,
  selectCascader,
} from "@/api/equirtyType";
import AddEquirtyType from "./components/addEquirtyType.vue";
import EditEquirtyType from "./components/editEquirtyType.vue";
export default {
  components: {
    AddEquirtyType,
    EditEquirtyType,
  },
  data() {
    return {
      tableDataType: [],
      tableDataTypeList: [],
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
      editTypeDetails: {},
      tableDataRecharge: [],
    };
  },
  mounted() {
    this.getAppQyPackageTypeList();
  },
  methods: {
    // 获取权益套餐分类列表接口
    getAppQyPackageTypeList() {
      getAppQyPackageTypeList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataType = res.data;
          this.tableDataTypeList = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 新增接口
    addAppQyPackageType(val) {
      addAppQyPackageType({
        name: val.name,
        parent_id: val.parent_id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.getAppQyPackageTypeList();
          this.$refs.refAddType.dialogVisibleAddType = false;
          this.$refs.refAddType.formAdd = {};
          this.tableDataRecharge = [];
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 查询单条接口
    getAppQyPackageTypeInfo(val) {
      getAppQyPackageTypeInfo({
        id: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.editTypeDetails = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 编辑接口
    updateAppQyPackageType(val) {
      updateAppQyPackageType({
        id: val.id,
        name: val.name,
        cover_img: val.cover_img,
        parent_id: val.parent_id,
        weight: val.weight,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("编辑成功");
          this.getAppQyPackageTypeList();
          this.$refs.refEditType.dialogVisibleEditType = false;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除接口
    deleteAppQyPackageType(val) {
      deleteAppQyPackageType({
        ids: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("删除成功");
          this.getAppQyPackageTypeList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 新增
    handleAdd() {
      this.selectCascader();
      this.$refs.refAddType.dialogVisibleAddType = true;
    },

    // 新增确定
    sureDialogAdd(val) {
      this.addAppQyPackageType(val);
    },

    // 新增取消
    cancelDialogAdd() {
      this.$refs.refAddType.dialogVisibleAddType = false;
    },

    // 编辑
    handleEdit(val) {
      this.selectCascader();
      this.getAppQyPackageTypeInfo(val);
      this.$refs.refEditType.dialogVisibleEditType = true;
    },

    // 编辑确定
    sureDialogEdit(val) {
      this.updateAppQyPackageType(val);
    },

    // 编辑取消
    cancelDialogEdit() {
      this.$refs.refEditType.dialogVisibleEditType = false;
    },

    // 删除
    handleDelete(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteAppQyPackageType(val);
        })
        .catch(() => {});
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNow = 1;
      this.getAppQyPackageTypeList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNow = val;
      this.getAppQyPackageTypeList();
    },

    // 是否显示接口
    updateAppQyPackageStatus(e, val) {
      updateAppQyPackageType({
        id: val.id,
        status: e,
        name: val.name,
        cover_img: val.cover_img,
        parent_id: val.parent_id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("切换成功");
          this.getAppQyPackageTypeList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 切换显示与隐藏
    upEnabled(e, val) {
      this.updateAppQyPackageStatus(e, val);
    },

    // 获取话费充值配置列表接口
    handleChangeTop(val) {
      console.log("打印", val[val.length - 1]);
    },

    selectCascader() {
      selectCascader().then((res) => {
        if (res.code == 1) {
          this.tableDataRecharge = this.getTreeData(res.data);
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 处理空白children
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
  },
};
</script>
